<template>
  <a :download="currentPicUrl" :href="currentPicUrl" ref="link" @click="confirmDownLoad">
    <el-tooltip :effect="tipTheme" content="下载图片" placement="right">
      <img :src="iconUrl" alt="" width="50px">
    </el-tooltip>
  </a>
</template>

<script>
import icon from '../assets/download.png';
import {mapState, mapGetters} from "vuex";
export default {
  name: "DownLoad",
  data() {
    return {
      iconUrl: icon,
      isConfirmed: false,
    }
  },
  computed: {
    ...mapState(['imgList', 'currentIndex']),
    ...mapGetters(['tipTheme', 'isLogin']),
    currentPicUrl() {
      return this.imgList[this.currentIndex]
    },
  },
  methods: {
    confirmDownLoad(e) {
      if (!this.isLogin) {
        this.$store.state.isFormDialogVis = true;
        e.preventDefault();
      } else {
        if (!this.isConfirmed) {
          e.preventDefault();
          this.$confirm('确认要下载该图片吗？', '提示', { type: 'warning' }).then(() => {
            this.isConfirmed = true;
            this.$refs.link.click();
          }).catch(() => {
            this.$message.info('已取消下载图片')
          })
        } else {
          this.isConfirmed = false;
        }
      }
      // else if (!confirm('确认要下载该图片吗？')) e.preventDefault();
    }
  }
}
</script>

<style scoped>
  a {
    position: absolute;
    top: 150px;
    left: 260px;
  }
</style>